<style>
.inner-banner {
    padding: 45px 0;
    background: url(./inner-banner.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
}

.inner-banner:before {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.76);
}
</style>
<script setup>
import paperApi from '@/api/paperApi'

const route = useRoute()
const paper = ref({
    title: '',
    paperType: { title: '' },
    subject: { title: '' },
    paperQuestionGroups: []
})

const breadNavList = ref([
    {
        name: '首页',
        path: '/my'
    },
    {
        name: '我的试卷',
        path: '/paper'
    }
])
onMounted(async () => {
    const paperId = route.query.id
    const res = await paperApi.getDetail(paperId)
    res.paperQuestionGroups.forEach((item) => {
        // 补充一个本地答案字段
        item.paperQuestions.forEach((question) => {
            question.myAns = ""
        })
    })
    paper.value = res


    console.log(res)
    breadNavList.value.push({
        name: res.title,
        path: '/paper/detail?id=' + paperId
    })
})

const goto = (idx) => {
    // console.log(idx)
    const el = document.getElementById(idx)
    el.scrollIntoView({ behavior: 'smooth' })
    // document.getElementById('app').scrollTo(0, 200 + el.offsetTop)
}

</script>
<template>
    <div class="container w-10/12 m-auto">
        <AppBreadCrumb :list="breadNavList"></AppBreadCrumb>
    </div>
    <div class="inner-banner mb-8">
        <div class="container w-10/12 m-auto relative z-10 text-white">

            <div class="flex items-center">
                <img class="" style="width:50px;height:50px;border-radius: 50%;" alt=""
                    src="../../assets/img/course/course-10.jpg">

                <div class="ml-3">
                    <h5><a href="instructor-profile.html" class="text-lg hover-highcolor">{{ paper?.subject?.title
                            }}</a>
                    </h5>
                    <p class="text-sm">初级</p>
                </div>
            </div>

            <h2 class="my-2 text-lg">{{ paper.paperType.title }}</h2>
            <p class="mb-4">{{ paper?.title }}</p>
            <div class="flex items-center text-sm">
                <i class="feather-calendar"></i><span class="mr-4">真题日期：2024-12-21 </span>
                <i class="feather-database"></i><span class="mr-4">
                    题目数量：{{ paper.paperQuestionGroups.reduce((acc, cur) => (acc + cur.paperQuestions.length), 0)
                    }}</span>
                <i class="feather-clock"></i>
                <span class="mr-4"> 考试时长：90分钟</span>
                <i class="feather-slack"></i><span class="mr-4"> 代码量：300行</span>
                <span>难度:</span> 简单
            </div>
        </div>
    </div>

    <div class="container w-10/12 m-auto">
        <div class="flex">
            <div class="w-9/12 mr-2">
                <div v-for="item in paper?.paperQuestionGroups" :key="item.id" class="d-flex">
                    <h5>{{ item.title }}</h5>
                    <div v-for="(it, idx) in item.paperQuestions" :key="it.id">
                        <AppPaperSubjectItem :paperQuestion="it" :idx="idx + 1" />
                    </div>
                </div>
            </div>
            <div class="w-3/12 ml-2 -mt-60 z-10">

                <div class="box p-6">
                    <div>
                        <a href="https://www.youtube.com/embed/1trvO6dqQUI" class="video-thumbnail" data-fancybox="">
                            <div class="play-icon">
                                <i class="fa-solid fa-play"></i>
                            </div>
                            <img class="" src="../../assets/img/video.jpg" alt="">
                        </a>
                    </div>
                    <div class="flex items-center justify-between my-4">
                        <h4>FREE</h4>
                        <p><span>$99.00</span> 50% off</p>
                    </div>
                    <div class="flex items-center justify-between gap-6">
                        <button class="btn-share rounded-full w-full">收藏</button>
                        <button class="btn-share rounded-full w-full">分享</button>
                    </div>
                    <div class="pt-4">
                        <button class="btn-join rounded-full w-full">Enroll Now</button>
                    </div>
                </div>
                <AppFixedComp>
                    <div class="box mt-4 p-4" v-for="(item, j) in paper?.paperQuestionGroups" :key="j">
                        <h4>{{ item.title }}</h4>
                        <div>
                            <ul class="grid grid-cols-5 gap-4 p-1">
                                <li class="bg-red-100 px-1 py-1 rounded-md text-center cursor-pointer"
                                    v-for="(i, idx) in item?.paperQuestions" :key="i"
                                    @click="goto('subject' + i.question.id)">
                                    {{ idx + 1 }}
                                </li>
                            </ul>
                        </div>
                    </div>
                </AppFixedComp>
            </div>
        </div>
    </div>

</template>
